import React from "react";
import { useTranslation } from "react-i18next";
import img1 from "../../assets/images/community/img1.png";

export default function FAQ() {
  const { t, i18n } = useTranslation();
  return (
    <div className="app-container faq-page">
      <div className="faq-page-bk">
      <div className="top-row">
        <div className="left">
          <div className="title">{t("faq.title")}</div>
          <div className="desc">{t("faq.desc")}</div>
        </div>
        <div className="right">
          <img className="right-img" src={img1}></img>
        </div>
      </div>
      <div className="info-box">
        <div className="title">{t("faq.infoTitle")}</div>

        <div className="bock-title">{t("faq.blockTitle1")}</div>
        <div className="split-desc">{t("faq.blockDesc1")}</div>
        <div className="bock-title">{t("faq.blockTitle2")}</div>
        <div className="split-desc">{t("faq.blockDesc2")}</div>
        <div className="bock-title">{t("faq.blockTitle3")}</div>
        <div className="split-desc">{t("faq.blockDesc3")}</div>
        <div className="normal-blod-desc">{t("faq.blockDesc4")}</div>
        <ul className="ul-desc">
          <li className="normal-desc">{t("faq.ulDesc1")}</li>
          <li className="normal-desc">{t("faq.ulDesc2")}</li>
          <li className="normal-desc">{t("faq.ulDesc3")}</li>
          <li className="normal-desc">{t("faq.ulDesc4")}</li>
        </ul>

        <div className="normal-blod-desc">{t("faq.blockDesc5")}</div>
        <div className="split-desc">{t("faq.blockDesc6")}</div>

        <div className="normal-blod-desc">{t("faq.blockDesc7")}</div>
        <div className="split-desc">{t("faq.blockDesc8")}</div>
        <div className="normal-blod-desc">{t("faq.blockDesc9")}</div>
        <div className="normal-desc">{t("faq.blockDesc10")}</div>
        <div className="normal-desc">{t("faq.blockDesc11")}</div>
        <div className="normal-desc">{t("faq.blockDesc12")}</div>
      </div>
      </div>
    </div>
  );
}
